// import { Button } from 'antd'
import React, { useEffect, useState } from 'react';
import { Avatar, List, Button, Popover, message, Input } from 'antd';
import { Msg } from '@/modules/chat/index'
import { useNavigate } from 'react-router-dom';
import { User } from '@/modules/login';
import { AddUserFriend } from '@/api/chat/index'
export default function UserListComponents(props: { list: Array<Msg>, noAddmsg: any }) {

  const [msglist, setmsglist] = useState<Array<Msg>>(props.list)
  const [addOrno, setaddOrno] = useState<string>('')
  const user = JSON.parse(window.localStorage.getItem('user')!) as User;
  const navigateTo = useNavigate()
  // const location = useLocation()
  useEffect(() => {
    // console.log(location.pathname);

    setmsglist([...props.list, ...msglist])
  }, [props.list])




  async function yesAdd(msg: Msg) {
    console.log(msg);
    const res = await AddUserFriend(msg)
    console.log(res);
    if (res.data === "添加成功") {
      console.log("成功");
      message.success("成功将" + msg.addNickname + "收入麾下,祝您武运昌隆!")

      msg.remark = addOrno
      msg.type = 101
      msg.msgType = 101
      msg.toId = msg.addFromId
      msg.addFromId = user.id
      msg.addNickname = user.nickname
      msg.code = 100
      msg.headImg = user.headImg
      props.noAddmsg(msg)

      msglist.forEach((e, index) => {
        e.msgId === msg.msgId
        console.log("找到了")
        msglist.splice(index, 1)
        setmsglist([...msglist])
      }


      )
    }
  }

  function noAdd(msg: Msg) {
    msglist.forEach((e, index) => {
      e.msgId === msg.msgId
      console.log("找到了")
      msglist.splice(index, 1)
      setmsglist([...msglist])
    })
    msg.remark = addOrno
    msg.type = -100
    msg.msgType = -100
    msg.toId = msg.addFromId
    msg.addFromId = user.id
    msg.addNickname = user.nickname
    msg.code = 100
    msg.headImg = user.headImg
    props.noAddmsg(msg)
    message.success('成功拒绝了这个坏东西~')
  }

  function addOrnoHandle(event: React.ChangeEvent<HTMLInputElement>) {
    setaddOrno(event.target.value)
  }
  const content = (item: Msg) => {
    return (

      <div style={{
        width: 300,
        height: 100,
        display: 'flex',
        justifyContent: 'space-around'
      }}>
        <Avatar shape='square' srcSet={item.headImg} style={{ width: 95, height: 95, }} src={item.headImg} />
        <div style={{
          width: 150,
          display: 'flex',
          alignItems: 'flex-start',
          justifyContent: 'space-between',
          flexDirection: 'column',
        }} >
          <div>{item.remark === '' ? "就是想加你" : item.remark}</div>
          {
            item.msgType === 3 ? <div></div> :

              <div>

                <Input style={{
                  width: '100%'
                }}
                  placeholder="回信"
                  onChange={addOrnoHandle}
                  value={addOrno}
                ></Input>
                <div style={{
                  display: "flex"
                }}>
                  <Button onClick={() => { yesAdd(item) }}>同意</Button>
                  <Button onClick={() => { noAdd(item) }}>拒绝</Button>

                </div>
              </div>
          }

        </div>

      </div >
    )
  }

  const to = (item: Msg) => {
    console.log(item);
    if (item.msgType == 100) {
      console.log("进来了");
      return;
    }
    navigateTo(`/home/${user.id}/chat/${item.toId}`, { state: { item } })
  }

  // 结构
  return (
    <div
      id="scrollableDiv"
      style={{
        height: 625,
        overflow: 'hidden',
        // padding: '0 16px',
        border: '1px solid rgba(140, 140, 140, 0.35)',
      }}
    >

      <List
        dataSource={msglist}
        renderItem={(item) => (
          <Button style={{
            width: '100%',
            height: "75px",
            borderRadius: 16
          }}
            onClick={() => { to(item) }}
          >
            <Popover content={content(item)} title={item.msgType === 100 ? "这家伙对你见色起意" : ""} placement='right'>
              <List.Item key={item.addNickname}>
                <List.Item.Meta
                  style={{
                    padding: 0
                  }}
                  avatar={<Avatar style={{ width: 60, height: 55 }} src={item.headImg} />}
                  title={<a href="#">{item.addNickname}</a>}
                  description={item.msgType === 100 ? "请求添加您为他的伙伴" : ""}
                />
              </List.Item>
            </Popover>
          </Button>
        )}
      />
      {/* </InfiniteScroll> */}
    </div>
  )
}


